<%--
  Created by IntelliJ IDEA.
  User: 马博
  Date: 2021/10/5
  Time: 13:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head >
    <meta charset="UTF-8">
    <title>确认订单</title>
    <link href="${pageContext.request.contextPath}/css/order/second_step.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/common.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
    <link href="http://r1nxp2i0y.hn-bkt.clouddn.com/images/ico.png" rel="icon" type="image/x-ico"/>

</head>

<body>
<jsp:include page="../message.jsp"/>
<div class="w1180">
    <!-------------------------------头部导航------------------------------->
    <div class="header">
        <a href="${pageContext.request.contextPath}">
            <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/logo.png">
        </a>
        <div class="content">
            <a href="">400-888-6608</a>
        </div>
        <div class="help_center">
            <a href="">帮助中心</a>
            <span>|</span>
        </div>
        <div class="help_center">
            <a href="${pageContext.request.contextPath}/user_center/${loginCustomer.custId}">我的小橘</a>
            <span>|</span>
        </div>
        <div class="user">
            <span>${loginCustomer.custName}</span>
            <a href="${pageContext.request.contextPath}/customer/logout">[退出]</a>
            <span class="user-span">|</span>
        </div>
    </div>

    <div class="order_banner_step">
        <div class="progress-percent"></div>
        <div class="progress-icon">
            <span class="progress-firsticon">1</span>
            <span class="progress-secondicon">2</span>
            <span class="progress-thirdicon">3</span>
            <span class="progress-fourthicon">4</span>
        </div>
        <div class="progress-text">
            <span class="progress-firsttext">挑选车型</span>
            <span class="progress-secondtext">填写与核对订单</span>
            <span class="progress-thirdtext">上传双证</span>
            <span class="progress-fourthtext">成功提交</span>
        </div>
    </div>
    <!--此div代表main部分-->
    <div class="order_main">
        <!--此div代表main的左边部分-->
        <div class="step2-box-left">

            <div class="order-info-box">
                <div class="car-image-box">
                    <img src="${carDetail.data.carImagePath}" >
                    <span>租 期：<span>${days}</span> 天</span>
                </div>

                <div class="store-info-box">
                    <div class="car-name">

                        <a class="revise-back" href="/?sqs=1IzKNFe7upK9v17ooZvyig==" target="_self" title="返回修改">返回修改</a>

                        ${carDetail.data.carName}            <a class="car-info" href="${pageContext.request.contextPath}/car/detail/${carId}" data-cid="{'cartypeList':[421],'groupId':0}" id="cartypedetail">车辆详情&gt;</a>
                    </div>

                    <ul>

                        <li><span class="store-title">取车地点</span><span class="store-title">还车地点</span></li>
                        <li><span>取车门店：${borrowStore.data.storeName}</span><span>还车门店：${returnStore.data.storeName}</span></li>
                        <li><span>取车时间：${getCarTime}</span><span>还车时间：${returnCarTime}</span></li>
                        <li><span>取车地址：${borrowStore.data.storeDetailAddress}</span><span>还车地址：${returnStore.data.storeDetailAddress}</span></li>
                        <li style="padding-top: 5px;"><span class="store-title">订单说明：</span></li>
                        <li class="rule-toggle">不限公里数，超时费按车辆租赁费及门店服务费均价÷6收取实际超期小时费 (部分0元活动订单，按照40元/小时进行收取)。</li>
                    </ul>
                </div>
            </div>

            <!--step2 优惠活动-->
            <div class="activity-box ">
                <div class="title">
                    优惠活动
                </div>

                <div class="activity-list " id="selpromotion">
                    <ul>
                        <li id="promotioncodeli">
                             使用优惠券<i>注：使用您获得的优惠券</i>
                        </li>
                        <c:forEach items="${customerCoupon.data}" var="item">
                            <li>
                                <input name="promotion" type="radio" class="ck-discount-code ba-analysis" data-ba-action="使用优惠券" onclick="useCoupon(${item.coupon.couponId})">
                                    ${item.coupon.couponName}<br>
                            </li>
                        </c:forEach>

                        <c:if test="${!empty customerCoupon.data}">
                            <li>
                                <input name="promotion" type="radio" id="999" class="ba-analysis" data-ba-action="不参加以上任何活动" onclick="notUseCoupon()">不参加以上任何活动
                            </li>
                        </c:if>
                        <c:if test="${empty customerCoupon.data}">
                            <span style="font-weight: bolder">当前暂无可使用优惠券</span>
                        </c:if>
                    </ul>
                </div>
            </div>

            <div class="invoice-box" id="invoiceList">

                <div class="title">发票信息</div>

                <div class="invoice-prompt">
                    <p>
                        1、代金券仅支持开增值税普通发票，开票金额以实际购买金额为准；使用代金券支付的金额不可再开具发票。<br>
                        2、自2017年1月1日起推行增值税电子普通发票，具体内容见官网帮助中心-网上预订-。<br>
                        3、自2017年7月1日起，购买方为政企的，索取增值税普通发票（或增值税电子发票）时，应向销售方提供纳税人识别号或统一社会信用代码，具体内容见官网帮助中心-网上预订
                    </p>
                </div>

                <div class="invoice-list">
                    <div class="invoice-head">
                        <input class="need-invoice ba-analysis" id="chkInv" data-inv="0" data-invoicetype="ElectronicInvoice" name="IsCheckedInvoice" type="checkbox"><label for="chkInv">需要发票</label>
                        <span>（从订单完成日起30天之内发票需求有效）</span>
                        <div class="invoice-sendway" style="display:none">寄送方式：快递</div>
                    </div>
                    <div class="invoice-info" style="display: none">
                        <div class="invoice-type">
                            <h4>发票类型</h4>
                            <ul>
                                <li class="active" data-invoicetype="ElectronicInvoice">电子发票</li>
                            </ul>
                        </div>
                        <div class="invoice-title">
                            <h4>
                                发票抬头
                                <a class="invoice-add" href="https://my.1hai.cn/UserCenter/MyInvoices" target="_blank">常用发票抬头管理</a>
                            </h4>
                            <table class="invoice-table" >
                                <thead>
                                <tr>
                                    <td width="42"></td>
                                    <td width="160">抬头类型</td>
                                    <td width="260">抬头名称</td>
                                    <td>税号</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td title=""></td>
                                    <td>(订单发票)</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="invoice-send">
                            <ul>
                                <li>
                                    <p>电子邮箱</p><input placeholder="请输入你的邮箱号" maxlength="50" id="invoiceEmail" value="">
                                </li>
                                <li>
                                    <p>手机号码</p><input placeholder="请输入你的手机号码" maxlength="15" id="invoicePhoneNumber" value="15225611926">
                                </li>
                            </ul>
                        </div>
                    </div>
                </div></div>
            <div class="rentcar-box" id="driverList">
            </div>

        </div>
        <!--此div代表main的右边部分-->
        <div class="order_main_right">
            <div class="cost_details">
                <span class="cost_details_word">费用明细</span>
            </div>
            <ul >
                <li class="car_cost1">
                    <span class="car_cost1_info">车辆租赁费及门店服务费</span>
                    <span class="car_cost1_money">${carDetail.data.carDailyPrice * days} </span>
                </li>
                <li class="car_cost2">
                    <span class="car_cost1_info">基本保障服务费</span>
                    <span class="car_cost1_money">￥${days*50}</span>
                    <span class="car_cost1_span">基本保障服务费50元*${days}天</span>
                </li>
                <li class="car_cost3">
                    <span class="car_cost1_info">其它服务费</span>
                    <span class="car_cost1_money">￥20 </span>
                </li>
                <li class="car_cost4">
                    <span class="car_cost1_info">车辆押金</span>
                    <span class="car_cost4_info_back">(可退)</span>
                    <span class="car_cost1_money">￥5000</span>

                    <span class="car_cost4_info">违章押金</span>
                    <span class="car_cost4_info_back2">(可退)</span>
                    <span class="car_cost1_money">￥2000</span>
                </li>
            </ul>

            <div class="order_main_right_costAll">
                <div class=" order_main_right_costAll_right">
                    <label class="order_main_right_costAll_right_total">总计:</label>
                    <span class="order_main_right_costAll_right_sign">￥</span>
                    <span class="order_main_right_costAll_right_money">${carDetail.data.carDailyPrice * days + days * 50 + 20}</span>
                </div>
            </div>
            <div class="order_main_right_costAll_commit">
                <form method="post" action="${pageContext.request.contextPath}/createOrder">
                    <input type="text" name="custId" value="${custId}" style="display: none">
                    <input type="text" name="carId" value="${carId}" style="display: none">
                    <input type="text" name="borrowStoreId" value="${borrowStoreId}" style="display: none">
                    <input type="text" name="couponId" id="couponId" style="display: none" >
                    <input type="text" name="returnStoreId" value="${returnStoreId}" style="display: none">
                    <input type="text" name="getCarTime" value="${getCarTime}" style="display: none">
                    <input type="text" name="returnCarTime" value="${returnCarTime}" style="display: none">
                    <input type="text" name="myOrderLeaseDays" value="${days}" style="display: none">
                    <input type="text" name="myOrderPrice" class="order_price" style="display: none">
                    <input type="submit" value="提交订单" class="order_main_right_costAll_commit_submit" onclick="createOrder()">
                </form>

            </div>
            <div class="price-help">
                <p style="display:none; border-bottom: 1px dashed #eb5a01; padding-bottom: 5px; margin-bottom: 5px;"><b>此单可参加周年庆返现活动，您需支付整单金额，返还金额（基本租车费的50%）将在还车后3-5个工作日退还至您的一卡行账户</b></p>
                首次租车请使用本人信用卡，本人二代有效身份证，本人有效地方驾驶证正副本。<br>
                <p>本订单仅为客户租车预约登记，提交该订单后，客户需要到门店办理具体租车手续，具体权利义务以签署的合同为准。</p>
            </div>
        </div>
    </div>
    <!--底部的信息-->
    <div class="footer">
        <div class="footer-box clear_float">
            <div class="footer-left">
                <p>
                    <a href="" >关于小橘</a>
                    |
                    <a href="" >移动客户端</a>
                    |
                    <a href="" >帮助中心</a>
                    |
                    <a href="" >建议专区</a>
                    |
                    <a href="" >联系我们</a>
                    |
                    <a href="" >友情链接</a>
                    | &nbsp;投诉通道：400-821-1608 &nbsp;
                </p>
                <p>
                    Copyright © 2007 - 2021 苏州小橘信息技术服务有限公司
                    <a href="" >ICP证：沪B2-20140130</a>
                </p>
            </div>
            <div class="footer-right">
                <a href="">
                    <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_first.png">
                </a>
                <a href="">
                    <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_second.png">
                </a>
                <a href="">
                    <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_third.png">
                </a>
                <a href="">
                    <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_forth.png">
                </a>
            </div>
        </div>
    </div>
</div>

<script>
    document.querySelector(".order_price").value = document.querySelector(".order_main_right_costAll_right_money").innerText;
    <%--document.querySelector(".ba-analysis").onclick = function (){--%>
    <%--    &lt;%&ndash;var couponId = "${customerCoupon.data.coupon.couponId}"&ndash;%&gt;--%>
    <%--    var days = "${days}";--%>
    <%--    if(days >= 3){--%>
    <%--        var amount = parseFloat((${carDetail.data.carDailyPrice * days + days * 50 + 20 - 50}));--%>
    <%--        console.log(amount.toFixed(1));--%>
    <%--        document.querySelector(".order_main_right_costAll_right_money").innerText = amount.toFixed(1);--%>
    <%--        document.querySelector(".order_price").value = document.querySelector(".order_main_right_costAll_right_money").innerText;--%>
    <%--    }--%>
    <%--}--%>

    function useCoupon(couponId){
        if(couponId == 6001){
            var days = "${days}";
            if(days >= 2){
                $("#couponId").val(6001);
                var amount = parseFloat((${carDetail.data.carDailyPrice * days + days * 50 + 20 - 50}));
                console.log(amount.toFixed(1));
                document.querySelector(".order_main_right_costAll_right_money").innerText = amount.toFixed(1);
                document.querySelector(".order_price").value = document.querySelector(".order_main_right_costAll_right_money").innerText;
            }else {
                $("#couponId").val(null);
                var amount = parseFloat((${carDetail.data.carDailyPrice * days + days * 50 + 20 }));
                console.log(amount.toFixed(1));
                document.querySelector(".order_main_right_costAll_right_money").innerText = amount.toFixed(1);
                document.querySelector(".order_price").value = document.querySelector(".order_main_right_costAll_right_money").innerText;
            }
        }else if(couponId == 6002){
            var days = "${days}";
            if(days >= 3){
                $("#couponId").val(6002);
                var amount = parseFloat((${carDetail.data.carDailyPrice * days + days * 50 + 20 - 100}));
                console.log(amount.toFixed(1));
                document.querySelector(".order_main_right_costAll_right_money").innerText = amount.toFixed(1);
                document.querySelector(".order_price").value = document.querySelector(".order_main_right_costAll_right_money").innerText;
            }else {
                $("#couponId").val(null);
                var amount = parseFloat((${carDetail.data.carDailyPrice * days + days * 50 + 20 }));
                console.log(amount.toFixed(1));
                document.querySelector(".order_main_right_costAll_right_money").innerText = amount.toFixed(1);
                document.querySelector(".order_price").value = document.querySelector(".order_main_right_costAll_right_money").innerText;
            }
        }else if(couponId == 6003){
            $("#couponId").val(6003);
            var amount = parseFloat((${carDetail.data.carDailyPrice * days + days * 50 + 20 - 100}));
            if(amount < 0){
                amount = 0;
            }
            console.log(amount.toFixed(1));
            document.querySelector(".order_main_right_costAll_right_money").innerText = amount.toFixed(1);
            document.querySelector(".order_price").value = document.querySelector(".order_main_right_costAll_right_money").innerText;
        }
    }

    function notUseCoupon(){
        console.log("不使用优惠券");
        $("#couponId").val(null);
        var amount = parseFloat((${carDetail.data.carDailyPrice * days + days * 50 + 20 }));
        console.log(amount.toFixed(1));
        document.querySelector(".order_main_right_costAll_right_money").innerText = amount.toFixed(1);
        document.querySelector(".order_price").value = document.querySelector(".order_main_right_costAll_right_money").innerText;
    }
</script>
</body>
</html>
